{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-select v-model="params.status" placeholder="请选择" @change="selectCate">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="待回复" value="0"></el-option>
                <el-option label="已回复" value="1"></el-option>
            </el-select>
        </el-col>
    </el-row>


    <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="留言用户"
          width="120"
          prop="name">
        </el-table-column>
        <el-table-column
          label="用户邮箱"
          width="150"
          prop="email">
        </el-table-column>
        <el-table-column
          label="留言内容"
          prop="content">
        </el-table-column>
        <el-table-column
          label="答复内容"
          align="center"
          prop="reply">
        </el-table-column>
        <el-table-column
          label="留言时间"
          align="center"
          :formatter="dateFormats"
          prop="addtime">
        </el-table-column>
        <el-table-column
          label="回复时间"
          align="center"
          :formatter="dateFormats"
          prop="e_time">
        </el-table-column>
        
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          width="80"
          >
            <template slot-scope="status">
                <el-tag type="success" v-if="status.row.status">已回复</el-tag>
                <el-tag type="info" v-else>待回复</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="350">
            <template slot-scope="c">
                <!-- <el-button type="danger" size="mini" @click="onSubmit(true,'{:url(\'del\')}',{id:c.row.id})">删除</el-button> -->
                <!-- <el-button type="success" size="mini" @click="edit(c.row)">回复</el-button> -->
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>
        
    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="600px" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="联系方式" prop="number">
                <el-input v-model="data.number" placeholder="用户未填写联系方式" disabled></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="cate">
                <el-input v-model="data.cate" placeholder="用户未选择分类" disabled></el-input>
            </el-form-item>
            <el-form-item label="反馈人" prop="author">
                <el-input v-model="data.author" placeholder="反馈人" disabled></el-input>
            </el-form-item>
            <el-form-item label="反馈内容" prop="cate">
                <el-input type="textarea" v-model="data.content" placeholder="反馈内容" readonly></el-input>
            </el-form-item>
            <el-form-item label="答复内容" prop="cate">
                <el-input type="textarea" v-model="data.reply" placeholder="请填写答复内容"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        params:{$params|raw},


        addVisible:false, //添加菜单框
        dialogTitle:'反馈处理',
        data:{}, // 添加、编辑数据
        rules:{
            reply:[
                {required: true, message:'请填写答复处理'},
            ],
            
        },
    },
    created(){
        this.emptyData();
    },
    watch:{
        params(val){
            console.log(val)
            //this.href("{:url('')}?module_id="+val);
        },
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                id:0,
                number:'',
                content:'',
                s_time:'',
                cate:'',
                author:'',
                reply:'',
                status:0,
            },newData);
        },
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        // 用户提交
        submit(){
            let data=this.data;
            this.onSubmit('forms','{:url(\'reply\')}',{id:data.id,reply:data.reply});
        },
        // 编辑
        edit(row){
            this.emptyData(row);
            this.showDialog();
        },
        selectCate(){
            let params=this.params;
            this.href("{:url('')}?status="+params.status);
        }
    },
});
</script>
{/block}